<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* html{
            border: 1px red solid;
        } */
        .box{
            position: relative;
            width: 200px;
            height: 200px;
            margin-left: 20px;
            background-color: green;
        }
        .box .inner-box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner-box">
            
        </div>
    </div>

    <script>

        // 经过测试 
        // 当外层盒子有定位时，内层盒子 offsetParent 为外层最近定位盒子
        // offsetTop offsetLeft 从定位盒子的 padding 开始算起
        
        // 当没有任何定位时，盒子offsetParent 为body
        // offsetTop offsetLeft 从 整个页面最边缘包括html的margin 开始算起
        var innerBox = document.querySelector('.box .inner-box');
        var box = document.querySelector('.box');
        // offsetWidth offsetHeight
        console.log("offsetWidth===>", innerBox.offsetWidth);
        console.log("offsetHeight===>", innerBox.offsetHeight);
        // offsetLeft offsetTop
        console.log('box offsetParent', innerBox.offsetParent);
        console.log('inner offsetLeft===>', innerBox.offsetLeft);
        console.log('inner offsetTop===>', innerBox.offsetTop);
        // offsetParent
        console.log('box offsetParent', box.offsetParent);
        console.log('offsetLeft', box.offsetLeft);
        console.log('offsetTop', box.offsetTop);
    </script>
</body>
</html>